<template>
  <div>
    <wxc-mask height="657"
              width="547"
              duration="200"
              border-radius="20"
              :has-animation="hasAnimation"
              mask-bg-color="transparent"
              :has-overlay="true"
              :show-close="true"
              :show="maskShow"
              @wxcMaskSetHidden="maskHidden">
      <wxc-ep-slider :slider-id="sliderId"
                     :card-length='userRedPacketList.length'
                     :containerS="{width: 547, height: 657}"
                     :card-s="cardSize"
                     :select-index="0">
        <div v-for="(userRedPacket, index) in userRedPacketList" :slot="`card${index}_${sliderId}`"
             class="red-packet"
             :key="index">
          <image resize="contain" :src="redPacketBg" class="red-packet-bg"></image>
          <div class="red-packet-values">
            <div class="red-packet-value" v-if="userRedPacket.money > 0">
              <text class="red-packet-value-val">{{userRedPacket.money.toFixed(0)}}</text>
              <text class="red-packet-value-text"> 元</text>
            </div>
            <div class="red-packet-value" v-if="userRedPacket.money == 0 && userRedPacket.integral > 0">
              <text class="red-packet-value-val">{{userRedPacket.money.toFixed(0)}}</text>
              <text class="red-packet-value-text"> 元</text>
            </div>
          </div>
          <div class="red-packet-name-wrapper">
            <text class="red-packet-name">{{userRedPacket.redPacketName}}</text>
          </div>
          <div class="red-packet-footer">
            <text class="red-packet-extra-integral" v-if="userRedPacket.money > 0 && userRedPacket.integral > 0">+{{userRedPacket.integral}}羽毛</text>
            <text class="red-packet-desc">恭喜您获得{{userRedPacket.redPacketDescription}}</text>
          </div>
          <text :class="['red-packet-draw-btn', 'activeable', userRedPacket.draw && 'red-packet-draw-btn-ok']" @click="draw(userRedPacket)">{{!userRedPacket.draw ? (loadingShow ? '领 取 中' : '现 在 领 取') : '领取成功，打开钱包查看'}}</text>
        </div>
      </wxc-ep-slider>
    </wxc-mask>
    <wxc-loading :show="loadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/activeable";

  .red-packet {
    width: 547px;
    height: 657px;
    position: relative;
    &-bg {
      width: 547px;
      height: 657px;
      position: absolute;
      top: 0;
      right: 0;
    }
    &-footer {
      position: absolute;
      top: 407px;
      left: 109px;
      width: 329px;
      height: 108px;
    }
    &-extra-integral {
      font-size: 30px;
      line-height: 40px;
      color: $color;
      font-weight: 200;
      width: 329px;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.67);
      height: 40px;
      border-radius: 40px;
      margin-bottom: 10px;
    }
    &-desc {
      text-align: center;
      font-size: 34px;
      line-height: 38px;
      color: #fde600;
    }
    &-values {
      position: absolute;
      top: 213px;
      left: 109px;
      width: 274px;
      height: 161px;
      align-items: center;
      justify-content: center;
    }
    &-name {
      font-size: 26px;
      line-height: 30px;
      color: $color;
      width: 46px;
      text-align: center;
      &-wrapper {
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 227px;
        left: 392px;
        width: 46px;
      }
    }
    &-draw-btn {
      position: absolute;
      top: 554px;
      text-align: center;
      left: 88px;
      font-size: 34px;
      background-color: #ffffff;
      border-radius: 46px;
      color: #811411;
      font-weight: 300;
      width: 373px;
      height: 64px;
      line-height: 64px;
      &-ok {
        font-size: 26px;
      }
    }
    &-value {
      flex-direction: row;
      align-items: flex-end;
      height: 130px;
      &-val {
        font-size: 130px;
        color: #fb4748;
        font-weight: 200;
        height: 130px;
        line-height: 130px;
      }
      &-text {
        font-size: 40px;
        height: 40px;
        line-height: 40px;
        color: $color;
        font-weight: 200;
        margin-bottom: 20px;
      }
    }

  }
</style>
<script>
import {WxcEpSlider, WxcMask, WxcLoading} from 'weex-ui'
let api = require('../include/api')
let urlPath = require('../include/url-path')
let navigator = require('../include/xnavigator')
module.exports = {
  props: {},
  components: {
    WxcEpSlider, WxcMask, WxcLoading
  },
  data () {
    return {
      redPacketBg: urlPath.assets('images/red-packet-bg.png?v=1'),
      userRedPacketList: [],
      sliderId: 'userRedPacketSlider',
      height: weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth,
      containerTop: 0,
      maskShow: false,
      loadingShow: false,
      cardSize: {
        width: 547,
        height: 657,
        spacing: 0,
        scale: 0.8
      }
    }
  },

  created () {
    this.containerTop = (this.height - 657) / 2
    this.loadData()
  },
  methods: {
    maskHidden () {
      this.maskShow = false
    },
    detect () {
      this.loadData()
    },
    loadData () {
      return api.userRedPacket.grantList().done(rs => {
        this.userRedPacketList = rs.data.results
        this.maskShow = this.userRedPacketList.length > 0
      })
    },
    draw (userRedPacket) {
      if (userRedPacket.draw) {
        navigator.push('my-balance.js')
        return
      }
      this.loadingShow = true
      api.userRedPacket.draw({id: userRedPacket.id}).done(rs => {
        userRedPacket.draw = true
      }).always(() => {
        this.loadingShow = false
      })
    }
  }
}
</script>
